<!DOCTYPE html>  
<html>  
<head>  
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />  
    <style type="text/css">  
        body, html {width: 100%;height: 100%;margin:0;font-family:"微软雅黑";}  
        #allmap{width:100%;height:100%;}  
        #r-result{width:100%;}  
    </style>  
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=s829ZA0Zg0QyMCy1F1FxQdV7hTI5Z2qU"></script>  
    <script type="text/javascript" src="http://api.map.baidu.com/library/TextIconOverlay/1.2/src/TextIconOverlay_min.js"></script>  
    <script type="text/javascript" src="http://api.map.baidu.com/library/MarkerClusterer/1.2/src/MarkerClusterer_min.js"></script>  
    <link href="./baidu_files/style.css" rel="stylesheet" type="text/css">
    <script type="text/javascript" src="./baidu_files/jquery-2.1.4.min.js"></script>
    <title>监控中心</title>  

    <style>
        .left {
          float: left;
          width: 295px;
          height: 100%;
          margin-left: 5px;
          margin-right: -100%;
          overflow-y:auto
        }
        .right {
            float: left;
          margin-left: 305px;
          height: 100%;
        }
      </style>
</head>  
<body>  
        
        <div >
               
                <label style="font-size:10px;" >车辆id:</label> <input type="text" id="carid" />
                <label style="font-size:10px;">车辆号码:</label> <input type="text" id="carname" /> 
                <button type="button" onclick="copyText()">添加车辆关联</button> 
                <button type="button" onclick="copyText1()">删除车辆关联</button>
                <button type="button" onclick="copyText2()">删除所有关联</button>
       </div> 
        <div class="left" id="tab" cellpadding="0" cellspacing="0">  
                <table id="table-3"  > <!-- Replace "table-1" with any of the design numbers -->
                    <thead>
                    <th width="50%">设备编号</th> 
                    <th width="50%">是否在线</th> 
                    </thead>
                    <div > 
                    <tbody >
                  
                    </tbody>
                    </table>    
                </div> 
                    
        </div>  
    <div class="right" id="allmap"></div> 
    
    
   
</body>  
</html>  
<script type="text/javascript">  
    // 百度地图API功能  
    var array;
    var map = new BMap.Map("allmap");  
    map.centerAndZoom(new BMap.Point(116.404, 39.915), 4);  
    map.enableScrollWheelZoom();  
    var top_left_control = new BMap.ScaleControl({anchor: BMAP_ANCHOR_TOP_LEFT});// 左上角，添加比例尺
	var top_left_navigation = new BMap.NavigationControl();
    map.addControl(top_left_control);        
		map.addControl(top_left_navigation);     
    var MAX = 10;  
    var markers = [];  
    var markerClusterer = null;  
    var adds= [];
    var index = 0;
    var myGeo = new BMap.Geocoder(); 
    // for (var i = 0; i < 10; i++) {  
    //     var pt = new BMap.Point(Math.random()*40+85, Math.random()*30+21); 
    //     adds.push(pt); 
    // }
    // bdGEO();
    // AddTableRow();

    function copyText()
    {
        var carid = document.getElementById("carid").value;
        var carname = document.getElementById("carname").value;

        if(window.localStorage){
            window.localStorage.setItem(carid,carname);;
        }else{
            alert('页面不支持保存');
        }
        location.reload(false);
    }
    function copyText1()
    {
        var carid = document.getElementById("carid").value;
        var carname = document.getElementById("carname").value;

        if(window.localStorage){
            window.localStorage.removeItem(carid);;
        }else{
            alert('页面不支持保存');
        }
        location.reload(true);
    }
    function copyText2()
    {
        // var carid = document.getElementById("carid").value;
        // var carname = document.getElementById("carname").value;

        if(window.localStorage){
            window.localStorage.clear();;
        }else{
            alert('页面不支持保存');
        }
        location.reload(false);
    }
    function AddTableRow()  
        {  
           
            var Table = document.getElementById("table-3");   //取得自定义的表对象  
            NewRow = Table.insertRow();                        //添加行  
            NewCell1= NewRow.insertCell();                     //添加列  
            NewCell2=NewRow.insertCell();  
            NewCell1.innerHTML = "<B>这是新加的列</B>";          //添加数据  
            NewCell1.innerHTML="11111";  
            NewCell2.innerHTML="22222";  
        }          

        // AddTableRow1();
    function AddTableRow1()  
        {  
           
            for(var i=0; i<2; i++){
                tr = '<tr onclick="OnTrClick('+'11.11,22.22'+')">'; // 创建时为tr指定click事件
                tr += '<td>' + "正常"+ '</td>';
                tr += '<td>' + "正常"+ '</td>';
                tr += '</tr>'
                $("#table-3").find("tbody").append(tr);
        }
        }       
        function OnTrClick(lat ,lon)  
        {
            var str = lat+','+lon;
            var point = new BMap.Point(lon, lat);  
             map.centerAndZoom(point, 20); // 中心点  
             for(var i=0;i<array.length;i++){ 
   
             var DeviceId = array[i].DeviceId;
             var DeviceNumber = array[i].DeviceNumber;
             var DeviceState = array[i].DeviceState;
             var Time = array[i].Time;
             var Lng = array[i].Lng;
             var Lat = array[i].Lat;
             var Speed = array[i].Speed;
             var Location1 = array[i].Location;


             var carname = window.localStorage.getItem(DeviceNumber);
             if(carname== null )
             {
                carname = '';
                
             }else{
                
             }
             var marker_map = new BMap.Marker(point);


             if(Lng == lon && lat == Lat)
             {
             var sContent =
            "<h4 style='margin:0 0 5px 0;padding:0.2em 0'>车辆定位信息</h4>" + 
            "<p style='margin:0;line-height:1.5;font-size:13px;'>设备编号："+DeviceNumber+"</p>" + 
            "<p style='margin:0;line-height:1.5;font-size:13px;'>车号:"+carname+"</p>" + 
            "<p style='margin:0;line-height:1.5;font-size:13px;'>时间:"+Time+"</p>" + 
                "<p style='margin:0;line-height:1.5;font-size:13px;'>地点:"+Location1+"</p>" + 
            "</div>";

             var infoWindow = new BMap.InfoWindow(sContent); 
             map.openInfoWindow(infoWindow,point);
             }
             }
        }
 
          

    function bdGEO(){	
		var pt = adds[index];
		geocodeSearch(pt);
		index++;
	}
	function geocodeSearch(pt){
		if(index < adds.length-1){
			setTimeout(window.bdGEO,400);
		} 
	
        myGeo.getLocation(pt, function(rs){
			var addComp = rs.addressComponents;
			var site = addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber;
            var sContent =
            "<h4 style='margin:0 0 5px 0;padding:0.2em 0'>车辆定位信息</h4>" + 
            "<p style='margin:0;line-height:1.5;font-size:13px;'>设备编号：812229929922</p>" + 
            "<p style='margin:0;line-height:1.5;font-size:13px;'>车号:123</p>" + 
            "<p style='margin:0;line-height:1.5;font-size:13px;'>时间:2018/03/12</p>" + 
                "<p style='margin:0;line-height:1.5;font-size:13px;'>地点:"+site+"</p>" + 
            "</div>";
            
            var infoWindow = new BMap.InfoWindow(sContent);  // 创建信息窗口对象
            var marker = new BMap.Marker(pt);  
            marker.addEventListener("click", function(){          
            this.openInfoWindow(infoWindow);
            //图片加载完毕重绘infowindow
            document.getElementById('imgDemo').onload = function (){
                infoWindow.redraw();   //防止在网速较慢，图片未加载时，生成的信息框高度比图片的总高度小，导致图片部分被隐藏
            }
	        });
            map.addOverlay(marker);  
            markers.push(marker);  
    
        //    if(index == adds.length-1){
        //     add_overlay();
        //    }
         });
         add_overlay();
	}
       
       
    
    
    
    function add_overlay(){  
        //最简单的用法，生成一个marker数组，然后调用markerClusterer类即可。  
        markerClusterer = new BMapLib.MarkerClusterer(map, {markers:markers});  
        // alert(1);
    }  
  
    function remove_overlay(){  
        for(var i=0; i<4; i++){  
            map.removeOverlay(markers[i]);  
        }  
        var markers1 = markers.slice(4,markers.length);  
        markerClusterer.clearMarkers();         //此步骤需要  
        markerClusterer = new BMapLib.MarkerClusterer(map, {markers:markers1});  
    }    

    var opts = {
				width : 250,     // 信息窗口宽度
				height: 80,     // 信息窗口高度
				title : "信息窗口" , // 信息窗口标题
				enableMessage:true//设置允许信息窗发送短息
			   };
    var posturl = "http://www.myliferv.com/motorhome-api/api/device/getMapLocation_bak";
    // var url = "http://221.130.6.210:9822/report-client/api/report/getAppReportByProvinceId";
    var Table = document.getElementById("table-3");   //取得自定义的表对象  
    $.post(posturl, {}, function (data) {

        // data = '{"ret":0,"msg":"成功","data":{"TotalCount":27,"CurrentCount":27,"DeviceList":[{"DeviceId":173808,"DeviceNumber":"881098310264714","DeviceState":1,"ActiveState":1,"Time":"2018/4/23 16:07:33","Lng":120.16159737,"Lat":30.27862284,"Speed":13.1,"Location":"浙江省杭州市下城区环城西路104号[杭州市人民政府-大楼南96米]"},{"DeviceId":174216,"DeviceNumber":"881098310265132","DeviceState":1,"ActiveState":1,"Time":"2018/4/8 8:56:43","Lng":103.96856887,"Lat":30.56997986,"Speed":0.0,"Location":"四川省成都市双流县机场东三路[随园花园餐厅附近21米]"},{"DeviceId":177336,"DeviceNumber":"881098310265290","DeviceState":1,"ActiveState":1,"Time":"2018/4/15 18:54:31","Lng":120.65859249,"Lat":28.0238351,"Speed":0.9,"Location":"浙江省温州市鹿城区三官殿巷143号[三官殿巷147号院附近47米]"},{"DeviceId":177419,"DeviceNumber":"881098310265323","DeviceState":1,"ActiveState":1,"Time":"2018/4/13 15:30:48","Lng":118.77381859,"Lat":32.03140889,"Speed":5.7,"Location":"江苏省南京市建邺区长虹路90号[长虹大市场东61米]"},{"DeviceId":177426,"DeviceNumber":"881098310265328","DeviceState":1,"ActiveState":1,"Time":"2018/4/23 16:08:09","Lng":118.60205475,"Lat":31.21668297,"Speed":14.8,"Location":"安徽省芜湖市芜湖县新竹服务区[新竹服务区北85米]"},{"DeviceId":177660,"DeviceNumber":"881098310265552","DeviceState":1,"ActiveState":1,"Time":"2018/4/23 15:50:13","Lng":104.17841524,"Lat":30.65660764,"Speed":0.1,"Location":"四川省成都市龙泉驿区蜀王大道北段[食林村大酒店南95米]"},{"DeviceId":185516,"DeviceNumber":"882098310278870","DeviceState":1,"ActiveState":0,"Time":"2018/1/31 11:34:34","Lng":118.83220627,"Lat":31.84828956,"Speed":0.3,"Location":"江苏省南京市江宁区X003(正方中路)[前晋家庄北302米]"},{"DeviceId":185412,"DeviceNumber":"882098310279076","DeviceState":1,"ActiveState":0,"Time":"2018/1/31 11:35:45","Lng":118.83215637,"Lat":31.84827419,"Speed":0.4,"Location":"江苏省南京市江宁区X003(正方中路)[前晋家庄北305米]"},{"DeviceId":185787,"DeviceNumber":"882098310279269","DeviceState":1,"ActiveState":1,"Time":"2018/4/20 17:01:35","Lng":118.59016362,"Lat":32.14488483,"Speed":0.1,"Location":"江苏省南京市浦口区[薛家营南227米]"},{"DeviceId":185927,"DeviceNumber":"882098310279349","DeviceState":1,"ActiveState":0,"Time":"2018/1/31 11:31:57","Lng":118.83218947,"Lat":31.84840295,"Speed":0.4,"Location":"江苏省南京市江宁区X003(正方中路)[前晋家庄北318米]"},{"DeviceId":185962,"DeviceNumber":"882098310279381","DeviceState":1,"ActiveState":0,"Time":"2018/1/31 11:37:12","Lng":118.83230343,"Lat":31.8482025,"Speed":0.0,"Location":"江苏省南京市江宁区X003(正方中路)[前晋家庄北280米]"},{"DeviceId":185820,"DeviceNumber":"882098310279414","DeviceState":1,"ActiveState":0,"Time":"2018/1/31 11:36:32","Lng":118.83220627,"Lat":31.84838789,"Speed":0.6,"Location":"江苏省南京市江宁区X003(正方中路)[前晋家庄北302米]"},{"DeviceId":185848,"DeviceNumber":"882098310279427","DeviceState":1,"ActiveState":1,"Time":"2018/4/23 10:08:51","Lng":116.86250479,"Lat":32.60550492,"Speed":0.0,"Location":"安徽省淮南市谢家集区平山路[谢三村南区-东北门西南74米]"},{"DeviceId":186247,"DeviceNumber":"882098310279449","DeviceState":1,"ActiveState":0,"Time":"2018/1/31 11:37:56","Lng":118.83199442,"Lat":31.84803362,"Speed":0.5,"Location":"江苏省南京市江宁区X003(正方中路)[前晋家庄西北289米]"},{"DeviceId":185923,"DeviceNumber":"882098310279458","DeviceState":1,"ActiveState":0,"Time":"2018/1/31 11:34:26","Lng":118.83228656,"Lat":31.84853905,"Speed":1.6,"Location":"江苏省南京市江宁区X003(正方中路)[前晋家庄北324米]"},{"DeviceId":186020,"DeviceNumber":"882098310279502","DeviceState":1,"ActiveState":1,"Time":"2018/4/21 16:11:34","Lng":118.764653,"Lat":31.97689075,"Speed":1.8,"Location":"江苏省南京市雨花台区宁双路7号[凤翔新城内]"},{"DeviceId":186239,"DeviceNumber":"882098310279504","DeviceState":1,"ActiveState":0,"Time":"2018/1/31 11:36:28","Lng":118.8319439,"Lat":31.84812812,"Speed":2.0,"Location":"江苏省南京市江宁区X003(正方中路)[前晋家庄北314米]"},{"DeviceId":186024,"DeviceNumber":"882098310279607","DeviceState":1,"ActiveState":0,"Time":"2018/1/31 11:36:34","Lng":118.8320593,"Lat":31.84808556,"Speed":2.0,"Location":"江苏省南京市江宁区X003(正方中路)[前晋家庄北300米]"},{"DeviceId":186067,"DeviceNumber":"882098310279623","DeviceState":1,"ActiveState":1,"Time":"2018/4/19 18:41:24","Lng":118.37811079,"Lat":31.37414891,"Speed":0.0,"Location":"安徽省芜湖市镜湖区天门山西路6号[皇廷宾馆南79米]"},{"DeviceId":186084,"DeviceNumber":"882098310279631","DeviceState":1,"ActiveState":0,"Time":"2018/1/31 11:33:00","Lng":118.83217284,"Lat":31.84839652,"Speed":1.4,"Location":"江苏省南京市江宁区X003(正方中路)[前晋家庄北337米]"},{"DeviceId":186092,"DeviceNumber":"882098310279635","DeviceState":1,"ActiveState":0,"Time":"2018/1/31 11:37:38","Lng":118.83217305,"Lat":31.84819178,"Speed":0.2,"Location":"江苏省南京市江宁区X003(正方中路)[前晋家庄北273米]"},{"DeviceId":186182,"DeviceNumber":"882098310279677","DeviceState":1,"ActiveState":0,"Time":"2018/1/31 11:34:32","Lng":118.83225464,"Lat":31.84841502,"Speed":0.5,"Location":"江苏省南京市江宁区X003(正方中路)[前晋家庄北334米]"},{"DeviceId":186189,"DeviceNumber":"882098310279683","DeviceState":1,"ActiveState":0,"Time":"2018/3/10 11:55:53","Lng":118.77388337,"Lat":32.03117403,"Speed":0.5,"Location":"江苏省南京市建邺区长虹路96号[长虹大市场东南76米]"},{"DeviceId":186537,"DeviceNumber":"882098310279701","DeviceState":1,"ActiveState":0,"Time":"2018/1/31 11:35:14","Lng":118.8323369,"Lat":31.84822123,"Speed":2.2,"Location":"江苏省南京市江宁区X003(正方中路)[前晋家庄北285米]"},{"DeviceId":186245,"DeviceNumber":"882098310279730","DeviceState":1,"ActiveState":0,"Time":"2018/1/31 11:38:54","Lng":118.8320743,"Lat":31.84823889,"Speed":1.1,"Location":"江苏省南京市江宁区X003(正方中路)[前晋家庄北300米]"},{"DeviceId":186234,"DeviceNumber":"882098310279757","DeviceState":1,"ActiveState":1,"Time":"2018/4/23 8:43:46","Lng":118.74377444,"Lat":31.98849005,"Speed":0.1,"Location":"江苏省南京市建邺区广聚路[新城科技园科技创新综合体东北88米]"},{"DeviceId":73740,"DeviceNumber":"V7098410169551","DeviceState":0,"ActiveState":0,"Time":"2017/2/18 23:52:40","Lng":118.82940092,"Lat":31.87762199,"Speed":0.0,"Location":"江苏省南京市江宁区秣周东路"}]}}';
        var json_data = data.data;
        
         array = json_data.DeviceList;
        for(var i=0;i<array.length;i++){ 
   
             var DeviceId = array[i].DeviceId;
             var DeviceNumber = array[i].DeviceNumber;
             var DeviceState = array[i].ActiveState;
             var Time = array[i].Time;
             var Lng = array[i].Lng;
             var Lat = array[i].Lat;
             var Speed = array[i].Speed;
             var Location1 = array[i].Location;
 
            var status = "";
            if(array[i].ActiveState ==1 )
            {
                status="在线";
            }else{
                status="离线";
            }  
            var carname = window.localStorage.getItem(DeviceNumber);
             if(carname == null )
             {
                tr = '<tr onclick="OnTrClick('+Lat+','+Lng+')">'; // 创建时为tr指定click事件
                tr += '<td>' +DeviceNumber  + '</td>';
                tr += '<td>' + status+ '</td>';
                tr += '</tr>'
             }else{
                tr = '<tr onclick="OnTrClick('+Lat+','+Lng+')">'; // 创建时为tr指定click事件
                tr += '<td>' +DeviceNumber +'<br>'+ carname + '</td>';
                tr += '<td>' + status+ '</td>';
                tr += '</tr>'
             }
            
            $("#table-3").find("tbody").append(tr);

        

             var sContent =
            "<h4 style='margin:0 0 5px 0;padding:0.2em 0'>车辆定位信息</h4>" + 
            "<p style='margin:0;line-height:1.5;font-size:13px;'>设备编号："+DeviceNumber+"</p>" + 
            "<p style='margin:0;line-height:1.5;font-size:13px;'>车号:"+DeviceId+"</p>" + 
            "<p style='margin:0;line-height:1.5;font-size:13px;'>时间:"+Time+"</p>" + 
                "<p style='margin:0;line-height:1.5;font-size:13px;'>地点:"+Location1+"</p>" + 
            "</div>";
            var pt = new BMap.Point(array[i].Lng, array[i].Lat); 
            // var infoWindow = new BMap.InfoWindow(sContent);  // 创建信息窗口对象
            var marker = new BMap.Marker(pt); 
            var pp=Lng+","+Lat;
            var marker1 = new BMap.Marker(new BMap.Point(pp,Location1)); 
            
            // marker.addEventListener("click", function(){          
            // map.openInfoWindow(infoWindow,pt);
           
	        // });
            map.addOverlay(marker); 
            
            addClickHandler(sContent,marker);
            markers.push(marker);  
        }
 
        add_overlay();
    })
    function addClickHandler(content,markerbak){
		markerbak.addEventListener("click",function(e){
			openInfo(content,e)}
		);
	}
	function openInfo(content,e){
		var p = e.target;
		var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
		var infoWindow = new BMap.InfoWindow(content);  // 创建信息窗口对象 
		map.openInfoWindow(infoWindow,point); //开启信息窗口
	}
</script>  